<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条件循环</title>
    <style>
        body {
            font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #34495e;
        }

        #push {
            margin-bottom: 20px;
        }

        #filter {
            margin-bottom: 20px;
        }

        #filter a {
            margin-right: 20px;
        }

        #display {
            border: 2px solid #ccc;
            /* border-left: 1px solid #ccc; */
            border-collapse: collapse;
            border-spacing: 0;
        }

        #display td,
        #display th {
            border: 2px solid #ccc;
            padding: 5px 20px;
            font-size: 1em;
            /* border-bottom: 1px solid #ccc; */
        }

        #display th {
            font-size: 1.1em;
        }

        a {
            display: inline-block;
            padding: 3px 5px;
            color: inherit;
            text-decoration: none;
            background-image: linear-gradient(to bottom, #f1f2f3, #d4d4d5);
            border: 1px solid #ccc;
            border-radius: 1px;
        }

        a:active {
            background-image: linear-gradient(to bottom, #d4d4d5, #f1f2f3);
        }
    </style>
    <script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
</head>

<body>
    <h1>条件循环</h1>
    <div id="app"></div>
    <script>
        var MyApp = san.defineComponent({
            template: `
            <div>
                <div id="push">
                    <label for="name">姓名：<input value="{= nameText =}" type="text" id="name"></label>
                    <label for="status">审核状态：
                        <select value="{= selectIndex =}" name="status" id="status" >
                            <option value="0">不合格</option>
                            <option value="1" selected="selected">合格</option>
                            <option value="2">待审核</option>
                        </select>
                    </label>
                    <a on-click="add" id="add" href="javascript:void(0);">添加</a>
                </div>
                <div id="filter">
                    筛选：
                    <a on-click="qualify" id="qualify" href="javascript:void(0);">合格</a>
                    <a on-click="disqualify" id="disqualify" href="javascript:void(0);">不合格</a>
                    <a on-click="audit" id="audit" href="javascript:void(0);">待审核</a>
                    <a on-click="all" id="all" href="javascript:void(0);">全部</a>
                </div>
                <table id="display">
                    <tr>
                        <th>姓名</th>
                        <th>审核状态</th>
                        <th>操作</th>
                    </tr>
                    <tr s-if="{{user.length > 0}}" s-for="item, index in user">
                        <td s-if="{{flag != 'all' ? item.status == flag : true}}">{{item.name}}</td>
                        <td s-if="{{flag != 'all' ? item.status == flag : true}}">{{item.status==0 ? "不合格": item.status==1 ? "合格" : "待审核"}}</td>
                        <td s-if="{{flag != 'all' ? item.status == flag : true}}">
                            <a on-click="handleRemove(index)" s-if="{{item.status != 2}}" id="handleRemove" href="javascript:void(0);">删除</a>
                            <a on-click="handleAudit(index)" s-else id="handleAudit" href="javascript:void(0);">审核</a>
                        </td>
                    </tr>
                </table>
            </div>
            `,
            initData: function () {
                return {
                    flag: 'all',
                    nameText: '',
                    selectIndex: 1,
                    user: [
                        // 0 不合格，1 合格，2 待审核
                        {
                            name: '张三',
                            status: 1
                        },
                        {
                            name: '李四',
                            status: 0
                        },
                        {
                            name: '王五',
                            status: 2
                        },
                        {
                            name: '赵六',
                            status: 2
                        },
                        {
                            name: '孙七',
                            status: 2
                        }
                    ]
                }
            },
            handleRemove: function (index) {
                // this.data.splice('user', [index, 1]);
                this.data.removeAt('user', index);
            },
            handleAudit: function (index) {
                // 对象的方法
                // this.data.apply('user', function (user) {    
                //     user[index].status = 1;                
                //     return user;
                // })
                // var arr = this.data.raw.user.map(function (v, i) {
                //     if (i == index) {
                //         v.status = 1;
                //     }
                //     return v;
                // })
                // this.data.merge('user', arr);

                // 数组的方法
                this.data.set('user[' + index + '].status', 1);
            },
            add: function () {
                var name = this.data.raw.nameText || '张三';
                var status = this.data.raw.selectIndex;
                this.data.push('user', {
                    name: name,
                    status: status
                });
            },
            qualify: function () {
                this.data.set('flag', 1);
            },
            disqualify: function () {
                this.data.set('flag', 0);
            },
            audit: function () {
                this.data.set('flag', 2);
            },
            all: function () {
                this.data.set('flag', "all");
            }
        });
        var myApp = new MyApp();
        myApp.attach(document.getElementById('app'));
    </script>
</body>

</html>